<!-- <script>
  export default {
    // setup
    // 1. 执行时机，比beforeCreate还要早
    // 2. setup函数中，获取不到this (this是undefined)
    // 3. 数据和函数，需要在setup最后return，才能模板中运用
    //    问题：每次都要return，好麻烦？
    // 4. 通过setup语法糖简化代码
    setup () {
      // console.log('setup函数', this)

      // 数据
      const message = 'hello Vue3'
      // 函数
      const logMessage = () => {
        console.log(message)
      }
      return {
        message,
        logMessage
      }
    },
    beforeCreate () {
      console.log('beforeCreate')
    }
  }
</script> -->

<script setup>
const message = 'this is message'
const logMessage = () => {
  console.log(message)
}
</script>

<template>
  <div>{{message}}</div>
  <button @click="logMessage">按钮</button>
</template>